<template>
    <div>
        <el-drawer :model-value="isDetailsShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
            <template #header>
                <h4 style="font-weight: bold;">企业详情</h4>
            </template>
            <table class="tableItem" border="1">
                <tr>
                    <td width="120" class="titleTd redColor"><span>牛场名称*</span></td>
                    <td><el-input disabled v-model="companyInfo.name" style="height: 40px;" placeholder="请输入牛场名称" /></td>
    
                    <td width="100" class="titleTd redColor"><span>养殖代码*</span></td>
                    <td><el-input disabled v-model="companyInfo.farmCode" style="height: 40px;" placeholder="请输入养殖代码" /></td>
    
                    <td width="120" class="titleTd redColor"><span>建厂时间*</span></td>
                    <td>
                        <el-date-picker disabled style="width: 140px;" value-format="YYYY-MM-DD" v-model="companyInfo.buildDate" type="date" placeholder="请选择时间" />
                    </td>
                </tr>
                <tr>
                    <td class="titleTd redColor"><span>厂址*</span></td>
                    <td colspan="3"><el-input disabled v-model="companyInfo.address" style="height: 40px;" placeholder="请输入厂址" /></td>
    
                    <td class="titleTd"><span>所属法人单位</span></td>
                    <td><el-input disabled v-model="companyInfo.orgName" style="height: 40px;" placeholder="请输入单位名称" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>经济性质</span></td>
                    <td><el-input disabled v-model="companyInfo.orgType" style="height: 40px;" placeholder="请输入经济性质" /></td>
    
                    <td class="titleTd redColor"><span>负责人*</span></td>
                    <td><el-input disabled v-model="companyInfo.contactUsername" style="height: 40px;" placeholder="请输入负责人名称" /></td>
    
                    <td class="titleTd redColor"><span>联系电话*</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.contactPhone" style="height: 40px;" placeholder="请输入联系电话" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>总投资(万元)</span></td>
                    <td colspan="3"><el-input disabled type="number" v-model="companyInfo.totalInvestment" style="height: 40px;" placeholder="请输入总投资" /></td>
    
                    <td class="titleTd"><span>占地面积(亩)</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.landArea" style="height: 40px;" placeholder="请输入占地面积" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>类型</span></td>
                    <td colspan="3">
                        <el-radio-group v-model="companyInfo.type" disabled style="margin-left: 10px;">
                            <el-radio :value="2" size="large">奶牛场</el-radio>
                            <el-radio :value="3" size="large">肉牛场</el-radio>
                        </el-radio-group>
                    </td>
                    <td class="titleTd"><span>年总产值(万元)</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.annualOutput" style="height: 40px;" placeholder="请输入年总产值" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>职工人数</span></td>
                    <td colspan="5"><el-input disabled type="number" v-model="companyInfo.employeeCount" style="height: 40px;" placeholder="请输入职工人数" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>申报品种</span></td>
                    <td colspan="2">
                        <!-- <el-select clearable v-model="companyInfo.declaredVariety" placeholder="请选择申报品种">
                            <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
                        </el-select> -->
                        <el-input disabled v-model="companyInfo.declaredVariety" style="height: 40px;" placeholder="请输入申报品种" />
                    </td>
                    <td class="titleTd"><span>存栏头数</span></td>
                    <td colspan="2"><el-input disabled type="number" v-model="companyInfo.stockCount" style="height: 40px;" placeholder="请输入存栏头数" /></td>
                </tr>
                <tr>
                    <td class="titleTd" style="vertical-align: middle;"><span>培育种公牛</span></td>
                    <td colspan="2"><el-input disabled type="number" v-model="companyInfo.breedingBulls" style="height: 40px;" placeholder="请输入培育种公牛数" /></td>
    
                    <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px; font-size: 14px;">联合育种种公牛站</span></td>
                    <td colspan="2"><el-input disabled v-model="companyInfo.breedingStation" style="height: 40px;" placeholder="请输入联合育种种公牛站" /></td>
                </tr>
                <!-- <tr>
                    <td class="titleTd" colspan="2"><span>主要机构设置</span></td>
                    <td class="titleTd"><span>生产</span></td>
                    <td class="titleTd"><span>育种</span></td>
                    <td class="titleTd"><span>兽医</span></td>
                    <td width="120" class="titleTd"><span>销售</span></td>
                </tr> -->
                <!-- <tr>
                    <td rowspan="2" class="titleTd" style="vertical-align: middle;">
                        <span>人员组成</span>
                    </td>
                    <td class="titleTd"><span>部门总人数</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                </tr> -->
                <!-- <tr>
                    <td class="titleTd"><span>技术人员数</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                </tr> -->
                <!-- <tr>
                    <td class="titleTd redColor"><span>执业兽医姓名*</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                    <td class="titleTd"><span>身份证号</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                    <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px;">获得执业兽医资质时间</span></td>
                    <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
                </tr> -->
                <!-- <tr>
                    <td rowspan="2" class="titleTd redColor" style="vertical-align: middle;"><span>生产性能测定员*</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                    <td class="titleTd"><span>身份证号</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                    <td class="titleTd"><span>培训时间</span></td>
                    <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
                </tr>
                <tr>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                    <td class="titleTd"><span>身份证号</span></td>
                    <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                    <td class="titleTd"><span>培训时间</span></td>
                    <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
                </tr> -->
            </table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelHandler">关闭</el-button>
                    <!-- <el-button type="primary" @click="editCompanyHandler">确认</el-button> -->
                </span>
            </template>
        </el-drawer>
    </div>
    </template>
    
    <script setup>
    import { ref, onMounted, onUpdated } from 'vue'
    import { reqGetBreedList } from '@/api/cattleStructure'
    import { reqAddCompanyList, reqGetCompanyInfo } from '@/api/company'
    import { ElMessage } from 'element-plus'
    
    // 接收父组件传递过来的数据
    let props = defineProps(['isDetailsShow', 'detailsId'])
    
    // 注册自定义事件
    let $emit = defineEmits(['closeDetailsDialog'])
    
    // 通过id获取详情
    const getCompanyInfo = async() => {
        let res = await reqGetCompanyInfo({
            id: props.detailsId
        })
        if(res.status == 200){
            Object.assign(companyInfo.value, res.data)
        }
    }
    
    // 收集表单信息
    let companyInfo = ref({
        type: '', // 企业类型：1-平台、2-奶牛、3-肉牛
        name: '', // 牛场名称
        farmCode: '', // 养殖代码
        buildDate: '', // 建厂时间
        address: '', // 厂址
        orgName: '', // 所属法人单位
        orgType: '', // 经济性质
        contactUsername: '', // 负责人姓名
        contactPhone: '', // 联系电话
        totalInvestment: '', // 总投资
        landArea: '', // 占地面积(亩)
        annualOutput: '', // 年总产值（万元）
        employeeCount: '', // 职工人数
        declaredVariety: '', // 申报品种
        stockCount: '', // 存栏头数
        breedingBulls: '', // 培育种公牛
        breedingStation: '', // 联合育种种公牛站
    })
    
    // 获取牛品种，筛选下拉列表
    let breedList = ref([])
    const getBreedList = async () => {
        let res = await reqGetBreedList()
        breedList.value = res.data
    }
    
    // 确认按钮
    const editCompanyHandler = async () => {
        let res = await reqAddCompanyList(companyInfo.value)
        if(res.status == 200){
            $emit('closeDetailsDialog', false)
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        }
    }
    
    // 关闭按钮
    const cancelHandler = () => {
        $emit('closeDetailsDialog', false)
    }
    
    // 组件挂载完毕
    onMounted(() => {
        getBreedList()
    })
    
    // 组件更新
    onUpdated(() => {
        getCompanyInfo()
    })
    </script>
    <script>
    export default {
        name: 'editCompany'
    }
    </script>
    
    <style scoped lang="scss">
    :deep(.el-drawer__header) {
        margin-bottom: 0;
        color: #000;
    }
    .tableItem{
        width: 100%;
        border-collapse: collapse;
        td{
            border: 1px solid #666666;
            // 表格中的输入框，样式修改
            ::v-deep(.el-input__wrapper) {
                --el-input-border-color: #ffffff;
                --el-input-border-radius: 0px;
                --el-input-focus-border-color: #ffffff;
                --el-input-hover-border-color: #ffffff; 
            }
        }
        .titleTd{
            span{
                line-height: 40px;
                text-align: center;
                display: block;
            }
        }
        tr{
            .redColor{
                color: red;
            }
        }
    }
    </style>